<template>
    <div id="container" class="container-c">
        <div
            v-for="(item, index) in list"
            :id="'tab' + index"
            :class="['tab', active == index ? 'active' : '', 'point']"
            @click="onTab(index)"
            :key="index"
        >
            {{ item }}
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
    props: ['active', 'list'],
    methods: {
        async onTab (index: number) {
            this.$emit('tabchange', index)
        }
    }
})
</script>

<style scoped lang="stylus">
.container-c
    position relative
    display inline-block
    border-radius 6px
    overflow auto
    background #e9eaef
    color color-grey
.tab
    display inline-block
    width 74px
    height 40px
    line-height 40px
    text-align center
    border 1px solid #e8e9ea
.active
    background-color white
</style>
